<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>积分规则管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" media="all">
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div style="padding-bottom: 10px;">
                    <button class="layui-btn layuiadmin-btn-list" data-type="add">添加规则</button>
                </div>

                <table id="LAY-rule-list" lay-filter="LAY-rule-list"></table>
            </div>
        </div>
    </div>

    <!-- 工具栏模板 -->
    <script type="text/html" id="table-rule-operation">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <a class="layui-btn layui-btn-xs {{# if(d.status == 1){ }}layui-btn-danger{{# }else{ }}layui-btn-warm{{# } }}" lay-event="status">
            {{# if(d.status == 1){ }}禁用{{# }else{ }}启用{{# } }}
        </a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>

    <!-- 表单模板 -->
    <script type="text/html" id="rule-form-tpl">
        <div class="layui-form" lay-filter="rule-form" style="padding: 20px 30px 0 0;">
            <input type="hidden" name="id" value="{{ d.id || '' }}">
            <div class="layui-form-item">
                <label class="layui-form-label">规则名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" value="{{ d.name || '' }}" lay-verify="required" placeholder="请输入规则名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">规则类型</label>
                <div class="layui-input-inline">
                    <select name="type" lay-verify="required">
                        <option value="">请选择类型</option>
                        <option value="1" {{# if(d.type == 1){ }}selected{{# } }}>消费赠送</option>
                        <option value="2" {{# if(d.type == 2){ }}selected{{# } }}>签到赠送</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" id="condition-item" {{# if(d.type == 2){ }}style="display:none"{{# } }}>
                <label class="layui-form-label">消费金额</label>
                <div class="layui-input-inline">
                    <input type="number" name="condition" value="{{ d.condition || '0' }}" lay-verify="number" placeholder="请输入消费金额" autocomplete="off" class="layui-input" min="0" step="0.01">
                </div>
                <div class="layui-form-mid layui-word-aux">元</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">赠送积分</label>
                <div class="layui-input-inline">
                    <input type="number" name="points" value="{{ d.points || '0' }}" lay-verify="required|number" placeholder="请输入赠送积分" autocomplete="off" class="layui-input" min="0">
                </div>
                <div class="layui-form-mid layui-word-aux">分</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <input type="radio" name="status" value="1" title="启用" {{# if(d.status !== 0){ }}checked{{# } }}>
                    <input type="radio" name="status" value="0" title="禁用" {{# if(d.status === 0){ }}checked{{# } }}>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">规则说明</label>
                <div class="layui-input-inline">
                    <textarea name="description" placeholder="请输入规则说明" class="layui-textarea">{{ d.description || '' }}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="rule-form-submit">立即提交</button>
                </div>
            </div>
        </div>
    </script>

    <script src="/app/admin/component/layui/layui.js"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script>
    layui.use(['table', 'form', 'layer', 'laytpl'], function(){
        var $ = layui.$
        ,table = layui.table
        ,form = layui.form
        ,layer = layui.layer
        ,laytpl = layui.laytpl;
        
        //积分规则列表
        var tableIns = table.render({
            elem: '#LAY-rule-list'
            ,url: '/app/ky_shouyin/points/rule/list'
            ,cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true}
                ,{field: 'name', title: '规则名称', width: 120}
                ,{field: 'type', title: '规则类型', width: 100, templet: function(d){
                    return d.type == 1 ? '消费赠送' : '签到赠送';
                }}
                ,{field: 'condition', title: '消费金额', width: 100, templet: function(d){
                    return d.type == 1 ? d.condition + '元' : '-';
                }}
                ,{field: 'points', title: '赠送积分', width: 100}
                ,{field: 'status', title: '状态', width: 80, templet: function(d){
                    return d.status == 1 ? '<span class="layui-badge layui-bg-green">启用</span>' : '<span class="layui-badge layui-bg-gray">禁用</span>';
                }}
                ,{field: 'description', title: '规则说明'}
                ,{field: 'created_at', title: '创建时间', width: 160}
                ,{title: '操作', width: 200, align: 'center', fixed: 'right', toolbar: '#table-rule-operation'}
            ]]
            ,page: false
            ,text: {
                none: '暂无数据'
            }
        });
        
        //监听工具条
        table.on('tool(LAY-rule-list)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                showForm(data);
            } else if(obj.event === 'del'){
                layer.confirm('确定要删除此规则吗？', function(index){
                    $.ajax({
                        url: '/app/ky_shouyin/points/rule/delete'
                        ,type: 'POST'
                        ,data: {id: data.id}
                        ,success: function(res){
                            if(res.code === 0){
                                layer.msg('删除成功', {icon: 1});
                                obj.del();
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'status'){
                var newStatus = data.status == 1 ? 0 : 1;
                $.ajax({
                    url: '/app/ky_shouyin/points/rule/setStatus'
                    ,type: 'POST'
                    ,data: {id: data.id, status: newStatus}
                    ,success: function(res){
                        if(res.code === 0){
                            layer.msg(newStatus == 1 ? '已启用' : '已禁用', {icon: 1});
                            obj.update({
                                status: newStatus
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                });
            }
        });
        
        //事件
        var active = {
            add: function(){
                showForm();
            }
        };
        
        $('.layui-btn.layuiadmin-btn-list').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        
        //显示表单
        function showForm(data){
            data = data || {};
            laytpl($('#rule-form-tpl').html()).render(data, function(html){
                layer.open({
                    type: 1
                    ,title: data.id ? '编辑规则' : '添加规则'
                    ,area: ['500px', '600px']
                    ,content: html
                    ,success: function(){
                        form.render(null, 'rule-form');
                        
                        //监听规则类型切换
                        form.on('select(type)', function(data){
                            var conditionItem = $('#condition-item');
                            if(data.value == 1){
                                conditionItem.show();
                            } else {
                                conditionItem.hide();
                            }
                        });
                        
                        //监听提交
                        form.on('submit(rule-form-submit)', function(data){
                            var field = data.field;
                            
                            $.ajax({
                                url: '/app/ky_shouyin/points/rule/save'
                                ,type: 'POST'
                                ,data: field
                                ,success: function(res){
                                    if(res.code === 0){
                                        layer.msg('保存成功', {icon: 1});
                                        layer.closeAll('page');
                                        tableIns.reload();
                                    } else {
                                        layer.msg(res.msg, {icon: 2});
                                    }
                                }
                            });
                            
                            return false;
                        });
                    }
                });
            });
        }
    });
    </script>
</body>
</html> 